<template>
	<view class="lishizhushejilu">
		<headertop title="历史注射记录" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<view class="headerback">

		</view>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>

		<view class="zhedieboxs">
			<view class="msgicon" v-if="!jiluarr.length">
				<image :src="_static('/images/wxnone.png')" mode="widthFix">
				</image>
				<view class="msgtext">
					暂无记录
				</view>
			</view>
			<view class="itembox" :style="{'height':item.flag?'':'104rpx'}" v-for="item in jiluarr" :key="item.id">
				<view class="center">
					<view class="toptitle">
						<span>注射日期：</span>
						<view class="righttext" @click="item.flag=!item.flag">
							<span
								:style="{'color':item.is_thirty==0?'red':''}">{{formattedDate(item['injection_time']*1000)}}</span>
							<image :src="_static('/images/Frjt.png')" class="arrow"
								:style="{'rotate':item.flag?'90deg':'0deg'}" mode=""></image>
						</view>
					</view>
					<view class="bottomcontent">
						<view class="line">
							<span>PEF后（L/min）：</span>
							<span>{{item.pef_last}}</span>
						</view>
						<view class="line">
							<span>FEV1：</span>
							<span>{{item['fev1']}}</span>
						</view>
						<view class="line">
							<span>注射瓶号：</span>
							<span>{{item['bottle_number']}}</span>
						</view>
						<view class="line">
							<span>剂量(ml)：</span>
							<span>{{item['dose']}}</span>
						</view>
						<view class="line">
							<span>留观反应：</span>
							<span>{{item['observe_symptoms_text']}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const formData = reactive({
		page: 1,
		list_row: 10
	})
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import ulm, {
		$api
	} from '@/ulm';
	const statusBarHeight = ref('')
	const barHeight = ref('')
	const flag = ref(false)
	const back1 = ref('')
	const total = ref(0)
	const jiluarr = ref([])
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}
	})
	onReachBottom(() => {
		if (total.value > jiluarr.value.length) {
			formData.page++
			injectionRecordinit()
		}
	})
	onLoad(() => {
		injectionRecordinit()
	})

	function padStart(n) {
		return n.toString().padStart(2, 0)
	}
	const formattedDate = (timestamp, ) => {
		const date = new Date(timestamp)
		const year = date.getFullYear()
		const month = padStart(date.getMonth() + 1)
		const day = padStart(date.getDate())
		return `${year}-${month}-${day}`
	}
	async function injectionRecordinit() {
		const res = await $api.injectionRecord()
		if (res.code == 1) {
			jiluarr.value.push(...res.data.data)
			for (var i in jiluarr.value) {
				jiluarr.value[i]['flag'] = false
			}
			total.value = res.data.total
		}
	}
</script>

<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	page {
		background: #F7F8FA;
	}

	.lishizhushejilu {
		width: 100%;
		overflow: hidden;
		position: relative;

		.headerback {
			width: 100%;
			height: 264rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.zhedieboxs {
			width: 686rpx;
			margin: auto;
			overflow: hidden;
			margin-top: 32rpx;

			.itembox {
				width: 100%;
				overflow: hidden;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				transition: 1s;
				margin-bottom: 28rpx;

				.center {
					width: 630rpx;
					margin: auto;
					overflow: hidden;

					.bottomcontent {
						width: 100%;
						overflow: hidden;
						padding: 24rpx 0;
						border-top: 2rpx solid #F2F3F5;

						.line {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #1D2129;
							margin-bottom: 24rpx;
						}
					}

					.toptitle {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						height: 104rpx;
						font-size: 28rpx;
						color: #1D2129;

						.righttext {
							display: flex;
							align-items: center;

							.arrow {
								width: 24rpx;
								height: 24rpx;
								margin-left: 12rpx;
								transition: 0.5s;
							}
						}
					}
				}

			}
		}
	}
</style>